<template>
  <div id="newgift">
    <div class="ngift-top">
      
        <div class="ngift-left">
          <img :src="data.goodsPicUrl" >
        </div>
        <div class="ngift-right">
          <p>{{data.goodsName}}</p>
        </div>
    </div>
    <p class="ngift-msg">您的信息已完善，李宁为您准备了实物新人礼，为保证您顺利收到礼品，请您填写真实姓名和详情地址。</p>
    <div id="GetInformation" >
      <!-- <app-Header title="领取信息"></app-Header> -->
      <group labelAlign="right" labelWidth="70px" labelMarginRight="5px">
        <x-input title="姓名" placeholder="请输入姓名" required="required" v-model="Name"></x-input>
        <x-input title="手机号" placeholder="请输入手机号码" v-model="inputphone" is-type="china-mobile" ref="input01"></x-input>
        <x-address title="所在地区" placeholder="请选择所在地区" :list="ChinaAddressData" value-text-align="left" v-model="Address"></x-address>
        <div class="vux-x-input weui-cell">
          <div class="weui-cell__hd"><!---->
            <label class="weui-label" style="width: 70px; text-align: right; margin-right: 5px;">详细地址</label>
          </div>
          <div class="weui-cell__bd weui-cell__primary">
            <input  autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" type="text" placeholder="请填写街道、小区门牌号等" v-model='DetAddress' class="weui-input">
          </div>
        </div>
      </group>
      <div>
        <alert v-model="alert" >{{title}}</alert>
      </div>
      <box gap="20px 20px">
        <x-button type="primary" @click.native="Validform">提交</x-button>
      </box>
      <App-Mask :mask="mask"></App-Mask>
    </div>
  </div>
</template>
<script>
  import AppMask from '../../components/mask/Mask'
  import Box from 'vux/src/components/box'
  import XInput from 'vux/src/components/x-input'
  import XButton from 'vux/src/components/x-button'
  import Alert from 'vux/src/components/alert'
  import Group from 'vux/src/components/group'
  import Selector from 'vux/src/components/selector'
  import Datetime from 'vux/src/components/datetime'
  import XAddress from 'vux/src/components/x-address'
  import {ChinaAddressV3Data} from 'vux'
  export default {
    name: 'newgift',
    components: {
      Box,
      Alert,
      XInput,
      XButton,
      Group,
      Selector,
      Datetime,
      XAddress,
      ChinaAddressV3Data,
      // AppHeader,
      AppMask
    },
    data () {
      return {
        data: {},
        alert: false,
        title: '',
        inputphone: '',
        Name: '',
        Address: [],
        DetAddress: '',
        ChinaAddressData: ChinaAddressV3Data,
        mask: {
          'isShow1': false,
          'isShow2': false,
          'isShow3': false
        }
      }
    },
    created () {
      this.selectCustNotGetGoods()
    },
    methods: {
      // 从useretting组件获取值
      selectCustNotGetGoods () {
        this.$axios.post(this.apidomain + '/api/giftCert/selectCustNotGetGoods/' + this.getCookie('appid'), {
          openId: this.getCookie('openid')
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            if (response.data.data !== null) {
              this.data = response.data.data
            } else {
              window.alert('没有查询到您有未领取的实物')
            }
          }
        })
        .catch((error) => {
          console.log(error)
          this.isLoading = false
        })
      },
      Validform () {
      // console.log(1)
        this.valid1 = this.$refs.input01.valid
        if (this.Name !== '' && this.Address.length === 3 && this.DetAddress !== '' && this.inputphone !== '' && this.valid1 === true) {
          console.log(1)
          this.$axios.post(this.apidomain + '/api/giftCert/updateCustGoodsAlreadyGet/' + this.getCookie('appid'), {
            openId: this.getCookie('openid'),
            id: this.data.id,
            consigneeName: this.Name,
            consigneeMobile: this.inputphone,
            detailAddress: this.DetAddress,
            province: this.Address[0] || '',
            city: this.Address[1] || '',
            district: this.Address[2] || ''
          })
          .then((response) => {
            // console.log(response.data)
            if (response.data.errorCode === '0') {
              this.mask.isShow3 = true
            }
          })
          .catch((error) => {
            console.log(error)
          })
          // this.mask.isShow3 = true
        } else {
          this.alert = true
          this.title = '请完善您的个人信息'
        }
      }
      // getdata () {
      //   if (typeof (localStorage.product) !== 'undefined') {
      //     this.data = JSON.parse(localStorage.product)
      //     // console.log(this.data)
      //   }
      // }
    },
    watch: {
      Name: function (newVal, oldVal) {
        if (newVal !== '' && oldVal !== '' && newVal !== oldVal) {
          // console.log('new：%s，old：%s，b：%s，s：%s，w：%s，q：%s，a：%s，', newVal, oldVal, this.$data.Birthday, this.$data.Sex, this.$data.WeChatNo, this.$data.QQNo, this.$data.Address)
        }
      }
    },
    mounted () {
      if (/Android [4-8]/.test(navigator.appVersion)) {
        window.addEventListener('resize', function () {
          if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
            window.setTimeout(function () {
              document.activeElement.scrollIntoViewIfNeeded()
            }, 0)
          }
        })
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/newgift/newgift.less";
</style>
